<!-- 自定义选择列宽度  -->
<template>
  <!-- 自定义选择列宽度 -->
  <div>
    <h2>自定义选择列宽度  selection-column-width="50px" </h2>
    <Table
        :data="customers"
        :columns="columns"
        resizable
        selection-column-width="50px"
        @update:columns="handleColumnsUpdate"
    />
  </div>

</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'
// 模拟客户数据
const customers = ref([
  { id: 1, name: '张三', age: 28, city: '北京', level: '黄金', points: 2800, lastVisit: '2024-03-01' },
  { id: 2, name: '李四', age: 35, city: '上海', level: '白银', points: 1500, lastVisit: '2024-03-02' },
  { id: 3, name: '王五', age: 42, city: '广州', level: '铂金', points: 3500, lastVisit: '2024-03-03' },
  { id: 4, name: '赵六', age: 31, city: '深圳', level: '黄金', points: 2300, lastVisit: '2024-03-04' },
  { id: 5, name: '钱七', age: 29, city: '杭州', level: '白银', points: 1800, lastVisit: '2024-03-05' },
  { id: 6, name: '孙八', age: 45, city: '成都', level: '钻石', points: 5000, lastVisit: '2024-03-06' },
  { id: 7, name: '周九', age: 33, city: '武汉', level: '黄金', points: 2600, lastVisit: '2024-03-07' },
  { id: 8, name: '吴十', age: 38, city: '南京', level: '铂金', points: 3200, lastVisit: '2024-03-08' },
  { id: 9, name: '郑十一', age: 27, city: '西安', level: '白银', points: 1600, lastVisit: '2024-03-09' },
  { id: 10, name: '王十二', age: 36, city: '重庆', level: '黄金', points: 2900, lastVisit: '2024-03-10' }
])

// 使用ref创建响应式columns
const columns = ref([
  { title: '姓名', dataIndex: 'name', width: '120px' },
  { title: '年龄', dataIndex: 'age', width: '80px' },
  { title: '城市', dataIndex: 'city', width: '120px' },
  { title: '会员等级', dataIndex: 'level', width: '120px' },
  { title: '积分', dataIndex: 'points', width: '100px' },
  { title: '最近访问', dataIndex: 'lastVisit', width: '150px' }
])

// 处理列宽更新
const handleColumnsUpdate = (newColumns) => {
  columns.value = newColumns  // 正确更新响应式数据
}
</script>